<template>
    <view class="container" :style="'padding-top: ' + (hasPadding ? titleBarHeight + statusBarHeight : '0') + 'rpx'">
        <cover-view class="capsule-bar" :style="'background-color: ' + bgColor + ';'">
            <cover-view class="status-bar" :style="'height: ' + (statusBarHeight + 4) + 'rpx;background-color: ' + statusBarColor + ';'"></cover-view>

            <cover-view class="title-bar" :style="'height: ' + titleBarHeight + 'rpx;background-color: ' + titleBarColor + ';'">
                <cover-view class="title l-title-class" :style="'color: ' + titleColor + ';'">{{ titleClone }}</cover-view>
            </cover-view>

            <cover-view
                v-if="!hiddenCapsule"
                class="capsule-button"
                :style="
                    'border-color: rgba(' +
                    (capsuleColor === 'black' ? '0,0,0,0.1' : '255,255,255,0.25') +
                    ');background-color: rgba(' +
                    (capsuleColor === 'black' ? '255,255,255,0.6' : '0,0,0,0.15') +
                    ');width: ' +
                    capsuleButtonInfo.width +
                    'px;height: ' +
                    capsuleButtonInfo.height +
                    'px;left: ' +
                    capsuleButtonInfo.left +
                    'px;top: ' +
                    capsuleButtonInfo.top +
                    'px;'
                "
            >
                <cover-view
                    mut-bind:tap="onTapLeftButton"
                    @longpress.stop.prevent="onLongPressLeftButton"
                    :hover-class="'icon-wrapper-hover-' + capsuleColor"
                    class="icon-wrapper"
                    :style="'width: ' + capsuleButtonInfo.width / 2 + 'px;height: ' + capsuleButtonInfo.height + 'px;'"
                >
                    <cover-image class="icon-left" :src="'icons/capsule-left-' + capsuleColor + '.png'"></cover-image>
                </cover-view>

                <cover-view class="line"></cover-view>

                <cover-view
                    mut-bind:tap="onTapRightButton"
                    @longpress.stop.prevent="onLongPressRightButton"
                    :hover-class="'icon-wrapper-hover-' + capsuleColor"
                    class="icon-wrapper"
                    :style="'width: ' + capsuleButtonInfo.width / 2 + 'px;height: ' + capsuleButtonInfo.height + 'px;'"
                >
                    <cover-image class="icon-right" :src="'icons/capsule-right-' + capsuleColor + '.png'"></cover-image>
                </cover-view>
            </cover-view>
        </cover-view>

        <view class="content-container">
            <slot></slot>
        </view>
    </view>
</template>

<script>
import deviceUtil from '../utils/device-util';
import validator from '../behaviors/validator';
import eventUtil from '../core/utils/event-util';
export default {
    data() {
        return {
            titleBarHeight: deviceUtil.getTitleBarHeight(),
            statusBarHeight: deviceUtil.getStatusBarHeight(),
            capsuleButtonInfo: null,
            titleClone: ''
        };
    },

    mixins: [validator],
    externalClasses: ['l-title-class'],

    props: {
        bgColor: {
            type: String,
            default: 'white'
        },
        statusBarColor: {
            type: String,
            default: 'transparent'
        },
        titleBarColor: {
            type: String,
            default: 'transparent'
        },
        titleColor: {
            type: String,
            default: 'black'
        },
        capsuleColor: {
            type: String,
            default: 'black',
            options: ['white', 'black']
        },
        disableBack: {
            type: Boolean,
            default: false
        },
        disableHome: {
            type: Boolean,
            default: false
        },
        hiddenCapsule: {
            type: Boolean,
            default: false
        },
        homePage: {
            type: String,
            default: ''
        },
        title: {
            type: String,
            default: ''
        },
        hasPadding: {
            type: Boolean,
            default: true
        }
    },

    mounted() {
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },

    methods: {
        ready: function () {
            this.setData({
                capsuleButtonInfo: this.getCapsuleButtonInfo()
            });
        },

        getCapsuleButtonInfo() {
            const t = uni.getSystemInfoSync().screenWidth;
            const e = uni.getMenuButtonBoundingClientRect();
            e.left = t - e.right;
            e.right = e.left + e.width;
            return e;
        },

        onTapLeftButton() {
            eventUtil.emit(this, 'linlefttap');
            this.disableBack || uni.navigateBack();
        },

        onLongPressLeftButton() {
            eventUtil.emit(this, 'linleftlongpress');
        },

        async onTapRightButton() {
            eventUtil.emit(this, 'linrighttap');
            const t = this.homePage;
            this.disableHome ||
                uni.switchTab({
                    url: t,
                    fail() {
                        uni.navigateTo({
                            url: t
                        });
                    }
                });
        },

        onLongPressRightButton() {
            eventUtil.emit(this, 'linrightlongpress');
        }
    },

    created: function () {}
};
</script>
<style>
.container {
    position: relative;
}
.container .capsule-bar {
    width: 100%;
    position: fixed;
    display: flex;
    flex-direction: column;
    top: 0;
    left: 0;
    z-index: 999;
}
.container .capsule-bar .status-bar {
    width: 100%;
}
.container .capsule-bar .title-bar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -4rpx;
    padding-top: 4rpx;
    box-sizing: border-box;
}
.container .capsule-bar .title-bar .title {
    font-size: 36rpx;
    font-weight: 700;
}
.container .capsule-bar .capsule-button {
    border-radius: 99999px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    position: fixed;
}
.container .capsule-bar .capsule-button .icon-wrapper-hover-black {
    background-color: rgba(0, 0, 0, 0.36);
}
.container .capsule-bar .capsule-button .icon-wrapper-hover-white {
    background-color: rgba(255, 255, 255, 0.339);
}
.container .capsule-bar .capsule-button .icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.container .capsule-bar .capsule-button .icon-wrapper .icon-left {
    display: block;
    width: 20rpx;
    height: 34rpx;
}
.container .capsule-bar .capsule-button .icon-wrapper .icon-right {
    display: block;
    width: 38rpx;
    height: 34rpx;
}
.container .capsule-bar .capsule-button .line {
    height: 18px;
    width: 1px;
    line-height: 1;
    background-color: rgba(255, 255, 255, 0.25);
}
.container .content-container {
    width: 100%;
    position: absolute;
    left: 0;
}
</style>
